$toolbar-size: 52px;
/*定义函数*/
@mixin toolbar-item($pos,$hoverPos){
    background-position: -1px $pos;
    &:hover{
         background-position: -1px $hoverPos;        
    }
}

.toolbar{
    position: fixed;
    left: 50%;
    bottom: 30%;
    margin-left: -$toolbar-size / 2;
}
.toolbar-item{
    display: block;
    width: $toolbar-size;
    height: $toolbar-size;
    background-image: url(test_11.png);
    background-repeat: no-repeat;
    margin-top: 1px;    
    position: relative;
    transition: all 1s;
    &:hover{
        .toolbar-layer{
            opacity: 1;
            transform: scale(1);            
        }
    }
    
}
.toolbar-item-weixin{
    @include toolbar-item(-421px,-482px);
    .toolbar-layer{
        height: 195px;
        background-position: -1px  -4px;
    }
}
.toolbar-item-app{
     @include toolbar-item(-543px,-605px);
    
    .toolbar-layer{
        height: 195px;
        background-position: -1px  -224px;
        
    }
}
.toolbar-item-feedback{
    @include toolbar-item(-666px,-727px);
  
}
.toolbar-item-top{
    @include toolbar-item(-787px,-857px);
   
}
.toolbar-layer{
    position: absolute;
    right:$toolbar-size ;
    display: block;
    bottom: 0;
    width: 160px;
    background-image: url(test_11.png);
    opacity: 0;
    transform: scale(0.01);
    transition: all 1s;
//  transform-origin: right bottom;
    transform-origin: 95% 95%;
}
